<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='#FFFFFF00' :isBack="true">
			<view slot='right-slot' class="center-slot">
				<image @tap="$navto('/pages/mine/appCenter/inviteDesc')" class="info" src="/static/images/mine/infosvg.svg" mode=""></image>
			</view>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>

		<!-- 我的baby -->
		<view class="no-data-box flex-col justify-center align-center" v-if="!inviteList.length">
			<image class="no-data" src="/static/images/no-datapng.png" mode=""></image>
			暂无数据
			<!-- <view class="btn justify-center align-center">
				去购买商品
			</view> -->
		</view>
		<view class="tabs">
			<u-tabs lineWidth="36rpx" lineColor="rgb(39, 255, 146)" :scrollable=false :current="checked" :activeStyle="{
			            color: '#FFFFFF',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
						 fontWeight: 'bold',
					            color: '#FFFFFF99',
					            transform: 'scale(1)'
					        }" itemStyle="height: 44px;" :list="list1" @click="toggle"></u-tabs>
		</view>
		<!-- <view class="time-select-box justify-start align-center" @click="pickerShow = true">
			<view class="time-select justify-start align-center">
				<view class="uni-input">{{comPickerValue}}
					<image class="jiantou" src="/static/images/mine/jiantou.svg" mode=""></image>
				</view>
			</view>

		</view>
		<u-datetime-picker :show="pickerShow" v-model="pickerValue" mode="date" @confirm='pickerConfirm'
			closeOnClickOverlay @cancel="pickerShow = false"></u-datetime-picker> -->
		<view class="content">
			<view class="content-box justify-between align-center" v-for="v,k in inviteList" :key="k">
				<view class="justify-start align-center">
					<image class="content-ava" :src="v.avatar" mode=""></image>
					<view class="name">
						{{v.nickname}}
					</view>
				</view>
				<view class="time">
				{{v.ctime_text}}
				</view>
			</view>
		</view>
		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			overlayOpacity='0.7'>
			<view class="popup-one-box flex-col align-center">

				<view class="has-shuijing justify-center">
					实名认证后即可使用本功能
				</view>
				<view class=" justify-between">
					<view class="popup-box-btn align-center justify-center" @click="moneyShow=false">
						取消
					</view>
					<view class="popup-box-btn-1 align-center justify-center"
						@click="$navto('/pages/mine/setting/userRealName')">
						去实名
					</view>
				</view>


			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				pickerValue: Number(new Date()),
				comPickerValue: this.$moment().format('YYYY-MM-DD'),
				pickerShow: false,
				current: 0,
				moneyShow: false,
				realName: false, //是否实名
				checked: 0,
				actionStyle: {
					color: "#56A796",
					fontSize: "28rpx",
					fontWeight: "bold",
					marginRight: "25rpx"
				},
				oreList:[],
				list1: [{
					name: '直接好友',
				}, {
					name: '间接好友',
				}],

				inviteList: [

				]


			}
		},
		onLoad(o) {
			if(o.tab){
				this.checked =Number(o.tab) 
			}
			this.getCardInfo()
		},
		methods: {
			// 列表
			async getCardInfo() {
				let url = '/api/v1/friends'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					type: this.checked+1,
				})
				if (code == 200) {
					console.log(data, '静态资源');
					this.explain = data.explain
					this.inviteList = data.list || []
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
				this.pickerShow = false
			},
			pickerConfirm(e) {
				console.log(this.$moment(e.value).format('YYYY-MM-DD'));

				this.comPickerValue = this.$moment(Number(e.value)).format('YYYY-MM-DD')
				this.getCardInfo()
			},
			toggle(item) {
				console.log(item.index);
				this.checked = item.index
				this.getCardInfo()
			},
			signOut() {
				uni.clearStorageSync('token')
				this.$navto('/pages/login/app-login', false, 3)
			},
			myCopy(value) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			setCategory(value) {
				switch (value) {
					case 1:
						// 支付密码
						if (this.realName) {

						} else {
							this.moneyShow = true
						}
						break;
					default:
						break;
				}
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.moneyShow = true
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		background: #16161e;
		padding: 0 32rpx 60rpx;
		min-height: 100vh;
		.content{
			width: 100%;
			.content-box{
				margin-bottom: 20rpx;
			}
			.content-ava{
				width: 80rpx;
				height: 80rpx;
				border-radius: 8rpx;
				margin-right: 25rpx;
			}
			.name{
				font-size: 30rpx;
				color: #D7D7DF;
			}
			.time{
				font-size: 24rpx;
				color: #6E6E78;
			}
		}
		.no-data-box {

			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -40%);
			color: #FFFFFFCC;
			font-size: 28rpx;

			.btn {
				margin-top: 60rpx;
				right: 0;
				height: 90rpx;
				width: 400rpx;
				border-radius: 8rpx;
				bottom: 120rpx;
				font-weight: 700;
				font-size: 30rpx;
				background: #20202c;
				color: #fff;
			}

			.no-data {
				width: 220rpx;
				height: 220rpx;
				margin-bottom: 30rpx;
			}

		}

		.center-slot {
			color: #FFF;
			.info{
				width: 48rpx;
				height: 48rpx;
			}
		}

		.time-select-box {
			width: 100%;
		}

		.time-select {
			margin: 1rem 0;
			min-width: 6.0625rem;
			height: 1.875rem;
			font-size: .8125rem;
			color: rgba(255, 255, 255, .8);
			background: #20202C;
			border-radius: .25rem;
			padding: .375rem .4375rem;

			.jiantou {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.tabs {
			// padding: 0 63rpx;
			width: 100%;
			height: 88rpx;

			.u-tabs {
				// border: 2rpx solid red;
			}

		}



	}

	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: #1D1D1D;
		padding: 48rpx 40rpx;

		.has-shuijing {
			width: 100%;
			height: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-bottom: 48rpx;
		}

		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}

		.popup-box-btn {
			width: 227rpx;
			height: 72rpx;
			background: #252727;
			color: rgba(255, 255, 255, .4);
			font-size: 28rpx;
			border-radius: 8rpx;
		}

		.popup-box-btn-1 {
			width: 227rpx;
			height: 72rpx;
			background: #27FF92;
			color: #000;
			font-size: 28rpx;
			margin-left: 24rpx;
			border-radius: 8rpx;
		}




		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}







	}
</style>